<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>08 百度换肤</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		ul{
			list-style: none;
		}
		#skin{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: url('images/skin1.jpg');
			background-position: center 0;
			background-repeat: no-repeat;

		}
		#skin-photo{
			width: 100%;
			height: 100px;
			position: relative;
			z-index: 10
		}
		#skin-photo ul{
			overflow: hidden;
			width: 1200px;
			margin: 0 auto;
			background-color: rgba(255,255,255,.5);
		}
		#skin-photo ul li{
			float: left;
			cursor: pointer;
			height: 120px;
			margin: 10px 0 10px 96px;
		}
		#skin-photo ul li img{
			width: 180px;
			height: 120px;
		}
	</style>
</head>
<body>
	<div id="skin"></div>
	<div id="skin-photo">
		<ul>
			<li>
				<img src="images/skin1.jpg">
			</li>
			<li>
				<img src="images/skin2.jpg">
			</li>
			<li>
				<img src="images/skin3.jpg">
			</li>
			<li>
				<img src="images/skin4.jpg">
			</li>
		</ul>
	</div>
	<script type="text/javascript">
		// 1.获取对应的图片
		var  skin = document.getElementById('skin');
		var allItems = document.getElementsByTagName('li');
		for(var i = 0; i < allItems.length; i++){
			allItems[i].index = i + 1;
			allItems[i].onclick = function(){
				skin.style.backgroundImage = ` url('images/skin${this.index}.jpg')`
			}
		}
	</script>
	
</body>
</html>